<template>
  <div class="user-index">
    <div class="user-com-title" style="padding-left: 16px; margin: 10px 0; font-weight: 700;font-size: 24px;color: #333;">{{$t('page.user.reflect')}}</div>
    <!-- <div class="user-com-title" style="padding-left: 16px">{{$t('page.user.reflect')}}</div> -->
    <div class="user-content">
      <div class="item text-info">
        <span class="label">{{$t('page.user.reflect')}}：</span>
        <input :placeholder="$t('page.user.reflect')" v-model="money" class="recharge_money">
      </div>
      <div class="item text-info">
        <div class="info">
          <input type="radio" class="" name="type" :checked="usdt" @click="changeHeader(1)">
          <span class="">{{$t('page.user.usdttx')}}</span>&emsp;
          <input type="radio" class="" name="type" :checked="bank" @click="changeHeader(2)">
          <span class="">{{$t('page.user.banktx')}}</span>&emsp;
        </div>
      </div>
      <div class="tips-box" v-if="usdt">
        <div class="item text-info">
          <span class="label">{{$t('page.user.Primarynetwork')}}：</span>
          <input :placeholder="$t('page.user.Primarynetwork')" v-model="usdt_main" class="recharge_money">
        </div>
        <div class="item text-info">
          <span class="label">{{$t('page.user.Walletaddress')}}：</span>
          <!-- <span class="txt">{{usdt_addr}}</span> -->
          <input :placeholder="$t('page.user.Walletaddress')" v-model="usdt_addr" class="recharge_money">

        </div>
        <div class="item text-info">
          <span class="label">{{$t('page.index.MyBalance')}}</span>
          <span style="color:#f89900">{{userInfo.now_money || 0}}</span>
        </div>
      </div>
      <div class="tips-box" v-if="bank">
        <div class="item text-info">
          <span class="label">{{$t('page.user.currency')}}：</span>
          <el-select v-model="currency" :placeholder="$t('page.user.currency')">
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in currencyList"
              :key="index"
            ></el-option>
          </el-select>
        </div>
        <div class="item text-info">
          <span class="label">{{$t('page.user.Bankdeposit')}}：</span>
          <input :placeholder="$t('page.user.Bankdeposit')" v-model="bank_bankName" class="recharge_money">
        </div>

        <div class="item text-info">
          <span class="label">{{$t('page.user.BankAddress')}}：</span>
          <input :placeholder="$t('page.user.BankAddress')" v-model="bank_address" class="recharge_money">
        </div>
        <div class="item text-info">
          <span class="label">{{$t('page.user.SWIFT')}}：</span>
          <input :placeholder="$t('page.user.SWIFT')" v-model="bank_swift" class="recharge_money">
        </div>
        <div class="item text-info">
          <span class="label">{{$t('page.user.Bankname')}}：</span>
          <input :placeholder="$t('page.user.Bankname')" v-model="bank_name" class="recharge_money">
        </div>
        <div class="item text-info">
          <span class="label">{{$t('page.user.bankaccount')}}：</span>
          <input :placeholder="$t('page.user.bankaccount')" v-model="bank_number" class="recharge_money">
        </div>
      </div>
      <div class="out-btn">
        <span @click="submitSub()">{{$t('page.user.ljreflect')}}</span>
      </div>
    </div>
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {Message, MessageBox} from 'element-ui';
export default {
      name: "recharge",
      auth: "guest",
      data(){
        return {
          userInfo:{},
          usdt_main:'',
          usdt_addr:'',
          bank_number:'',
          bank_bankName:'',
          bank_name:'',
          bank_swift:'',
          bank_address:'',
          money: '',
          recharType: 1,
          usdt:true,
          bank:false,
          currency:'',
          currencyList:[]
        }
      },
    fetch({ store }) {
      store.commit("isBanner", false);
      store.commit("isHeader", true);
      store.commit("isFooter", true);
    },
    head() {
      return {
        title: this.$t('page.user.mybalance') + "-"+this.$store.state.titleCon
      }
    },
    created(){
      this.getCurrencyList()
    },
    mounted() {
        let local = this.$cookies.get('auth.strategy')
        this.myHeaders = {
          'Authorization': this.$cookies.get(`auth._token.${local}`)
        }
        this.userInfo = this.$auth.user
    },
   methods:{
    getCurrencyList() {
      this.$axios.get("/api/user/extract/currency").then(res=>{
        this.currencyList = res.data
        this.currency = this.currencyList.length > 0 ? this.currencyList[0] :''
      })
    },
    getLastRecharge(){
      this.$axios.get("/api/user/extract/recharge_info",{})
				.then(res => {
          this.usdt_main = res.data.usdt_main;
					this.usdt_addr = res.data.usdt_addr;
					this.bank_number = res.data.bank_number;
					this.bank_bankName = res.data.bank_bankName;
					this.bank_name = res.data.bank_name;
          this.bank_address = res.dat.bank_addr;
          this.bank_swift = res.data.swift
          this.currency = res.data.currency
				})
				.catch(res => {
					that.$message.error(res)
				});
    },
    changeHeader(e) {
      console.log(e);
      if (e == 1) {
        this.recharType=1;
        this.usdt = true;
        this.bank = false;
      }else if (e == 2) {
        this.recharType=2;
        this.usdt = false;
        this.bank = true;
      }
    },
    /*
    * 用户充值
    */
    submitSub: function(e) {
      let that = this

      if (!that.money) {
        return Message.error(this.$t('page.user.PReflectmount'));
      }
      if (!Number(that.money)) {
        return Message.error(this.$t('page.user.zqechargeamount'));
      }
      if(this.recharType === 2) {
        if (!this.bank_number){
          return Message.error(this.$t('page.user.enter')+this.$t('page.user.bankaccount'));
        }
        if (!this.bank_bankName){
          return Message.error(this.$t('page.user.enter')+this.$t('page.user.Bankdeposit'));
        }
        if (!this.bank_name){
          return Message.error(this.$t('page.user.enter')+this.$t('page.user.Bankname'));
        }
      }
      this.$axios.post("/api/user/extract/withdraw",{
        usdt_main: this.usdt_main,
        usdt_addr: this.usdt_addr,
        money:this.money,
        bank_account:this.bank_number,
        bank_name: this.bank_bankName,
        bank_username: this.bank_name,
        bank_addr:this.bank_address,
        recharType:this.recharType,
				swift:this.bank_swift,
				currency: this.currency
      }).then(res => {
        console.log(res);
          let host = window.location.protocol+"//"+window.location.host;
          let url = host+`/user/balance?type=4`
          setTimeout(() => {
            location.href = url;
          }, 100);

      }).catch(error=>{
        return Message.error(error);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.copy{
display: inline-block;
width: 71px;
height: 35px;
line-height: 35px;
border: 1px solid #CECECE;
text-align: center;
border-radius: 5px;
background: aliceblue;
cursor: copy;
}
.recharge_money{
border: 1px solid #ECECEC;
height: 44px;
border-radius: 10px;
text-indent: 20px;
}
.user-index{
.user-content{
  padding:4px 0;
  .item{
    padding-left: 16px;
    position: relative;
    font-size: 14px;
    border-bottom: 1px dashed #DDDDDD;
    margin-right: 54px;

    .edit-txt{
      position: absolute;
      right: 0;
      bottom: 16px;
      color: #f89900;
      cursor: pointer;
    }
    .label{
      display: inline-block;
      width: 200px;
      color: #777777;
    }
    &.user-info{
      padding-bottom: 20px;
      .title{
        color: #282828;
        font-size: 18px;
      }
      .info{
        margin-top: 20px;
        color: #777777;
        font-size: 14px;
        img{
          width: 80px;
          height: 80px;
          border-radius: 50%;
          vertical-align: -44px;
          display: inline-block;
        }
      }
    }
    &.text-info{
      height: 70px;
      line-height: 70px;
      .edit-txt{
        top: 0;
      }
      .txt{
        color: #282828;
        width: 700px;
      }
    }
  }
  .out-btn{
    text-align: right;
    margin-right: 54px;
    span{
      display: inline-block;
      width: 130px;
      height: 40px;
      margin-top: 38px;
      line-height: 40px;
      text-align: center;
      background: #f89900;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
}
.input-item{
display: flex;
align-items: center;
margin-bottom: 20px;
.code-box{
  width: 115px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  margin-left: 30px;
}
}
.dialog-footer{
display: flex;
align-items: center;
justify-content: center;
padding-top: 40px;
border-top: 1px solid #EFEFEF;
button{
  width: 190px;
  height: 45px;
}
}
</style>
